Add Starter Templates Component

Overview

This PR introduces a new Starter Templates feature that allows users to quickly initialize projects with various popular frameworks. The implementation adds a grid of framework icons at the bottom of the chat interface when no conversation is started.

Key Changes

1. New Starter Templates Component

• Added StarterTemplates.tsx component to display framework options
• Integrated framework icons and templates configuration
• Enhanced BaseChat component to include the new templates section

2. Templates Configuration

• Added new template type definitions
• Implemented comprehensive list of starter templates including:
  • Astro, Next.js, Qwik, Remix
  • SvelteKit, Vue, React, Angular
  • And more framework options

Technical Details

Adding New Templates

To add a new template, update the STARTER_TEMPLATES array in constants.ts:

// Add new template to STARTER_TEMPLATES array
export const STARTER_TEMPLATES: Template[] = [
  {
    name: 'my-new-template',              // Unique identifier
    label: 'My New Template',             // Display name
    description: 'Template description',   // Brief description
    githubRepo: 'username/repo-name',     // GitHub repository path
    tags: ['tag1', 'tag2'],              // Optional tags for filtering
    icon: 'i-bolt:framework-name',        // Icon class (must match SVG filename)
  },
  // ... existing templates
];

Requirements:

• Add corresponding SVG icon in /icons directory
• Icon filename must match the framework name used in the icon class
• GitHub repository must be public and contain template code
• Template should include basic project setup and README

StarterTemplates Component

Key implementation snippet:

const FrameworkLink: React.FC<FrameworkLinkProps> = ({ template }) => (
  <a
    href={`/git?url=https://github.com/${template.githubRepo}.git`}
    className="items-center justify-center"
  >
    <div className={`inline-block ${template.icon} w-8 h-8 text-4xl transition-theme opacity-25 hover:opacity-75`} />
  </a>
);

const StarterTemplates: React.FC = () => {
  return (
    <div className="flex flex-col items-center gap-4">
      <span className="text-sm text-gray-500">or start a blank app with your favorite stack</span>
      <div className="flex justify-center">
        <div className="flex w-70 flex-wrap items-center justify-center gap-4">
          {STARTER_TEMPLATES.map((template) => (
            <FrameworkLink key={template.name} template={template} />
          ))}
        </div>
      </div>
    </div>
  );
};

System Changes

• Added new SVG icons for all supported frameworks
• Updated Uno config to include new icon collection
• Modified BaseChat layout to accommodate the templates section
• Added new Template interface for type safety

Testing

• Visual verification of template icons display
• Tested icon hover states and transitions
• Verified GitHub repository links for each template
• Confirmed proper layout in both empty and active chat states

Migration Impact

• No breaking changes
• No database migrations required
• Fully backward compatible

Future Improvements

• Include more framework options

Preview